<!-- 慕课列表 -->
<template>
    <div class="mooc-list-wrap" v-loading="loading">
        <template v-if="pageInfo.total > 0">
            <div class="mooc-list">
                <div v-for="item in list" :key="item.id" :data="item" class="mooc-cell" @click="toDetail(item)">
                    <div class="link-container" v-link="linkUrl(item)">
                        <div class="cover-wrap">
                            <div class="vc-cover">
                                <LazyImage :src="item.cover" :lazy="false" :className="item.cover ? 'hover-img' : 'img'" />
                            </div>
                            <div class="vc-status" v-if="dealTag(item)">{{ dealTag(item) }}</div>
                        </div>
                        <div class="main-wrap">
                            <div class="flex-start">
                                <div class="course-flag" :class="{ 'required-course': item.required }">{{ item.required ? '必修' : '选修' }}</div>
                                <div class="vc-title">
                                    <Ellipsis :content="item.title" />
                                </div>
                            </div>
                            <div class="flex-start user-info">
                                <div>{{ dealTeacher(item) }}</div>
                                <div class="seperator" v-if="dealSchool(item)"></div>
                                <div class="school flex-1 overflow-ellipsis">{{ dealSchool(item) }}</div>
                            </div>
                            <div class="course-info flex-between">
                                <div>{{ item.classHour || 0 }}学时</div>
                                <div>{{ item.buyUserCount || 0 }}人已报名</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="pageInfo.total > pageInfo.pageSize" class="page-wrap-right">
                <Pagination :current-page="pageInfo.currentPage" :page-size="pageInfo.pageSize" :total="pageInfo.total"
                    @size-change="sizeChange" @current-change="currentChange" />
            </div>
        </template>
        <div class="no-data-wrap" v-else>
            <NoData info="暂无慕课资源" url="no-course.png" />
            <el-button v-if="isCreater" class="srt-el-button srt-el-button-h32 add-mooc-btn"
                @click="emit('manage-topic', 2)">+添加慕课</el-button>
        </div>
    </div>
</template>

<script setup>
import LazyImage from '@/components/lazy-image/lazy-image.vue';
import Ellipsis from '@/components/ellipsis.vue';
import Pagination from '@/components/pagination/pagination.vue';
import NoData from '@/components/no-data.vue';
import { ref, reactive, computed, onBeforeMount } from 'vue';
import { pageJump } from '@/global/location-transfer';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { jumpHref } from '@/router/jumpHref.js';

const emit = defineEmits(['manage-topic']);

const props = defineProps({
    isCreater: { // 是否是专题创建人
        type: Boolean,
        default: false
    },
    isAdmin: { // 是否是专题管理员
        type: Boolean,
        default: false
    },
});

const route = useRoute();

const store = useStore();

// 慕课列表数据
const list = ref([]);

// 慕课列表加载
const loading = ref(false);

// 慕课分页数据
const pageInfo = reactive({
    currentPage: 1,
    pageSize: 20,
    total: 0
});

const topicMsgMap = {
    topicNotStart: '为了能同步您的专题学习进度，专题学习开始后我们将自动帮您报名该专题', // 专题未开始
    topicEnd: '本期专题学习已结束，您可以继续学习该慕课，但是不记录专题学习进度', // 专题已结束
}

// 当前用户数据
const currentUser = computed(() => {
    return store.state.currentUser || {};
});

// 处理慕课卡片标签分类数据
function dealTag(courseInfo) {
    return courseInfo.classifyList && courseInfo.classifyList.length && courseInfo.classifyList[0].name
}

// 处理慕课卡片教师数据
function dealTeacher(courseInfo) {
    let teacherName = ''
    if (courseInfo.lecturerList && courseInfo.lecturerList.length) {
        teacherName = courseInfo.lecturerList[0].name.length > 4 ? (courseInfo.lecturerList[0].name.slice(0, 4) + '...') : courseInfo.lecturerList[0].name
    }
    return teacherName
}

// 处理慕课卡片学校/单位数据
function dealSchool(courseInfo) {
    return courseInfo.lecturerList && courseInfo.lecturerList.length && courseInfo.lecturerList[0].workPlace
}

// 跳转详情页
function toDetail(courseInfo) {
    pageJump(linkUrl(courseInfo), true);
}

//跳转详情页链接
function linkUrl(courseInfo) {
    return jumpHref[route.name === 'strainTopicDetail' ? 'strain' : 'mooc'].moocDetail(courseInfo.id) + `?taskId=${route.params.topicId}`;
}

// 切换页码
function currentChange(num) {
    pageInfo.currentPage = num;
    getList();
}

// 切换每页条数
function sizeChange(num) {
    pageInfo.pageSize = num;
    getList();
}

// 获取专题下的慕课列表
function getList() {
    if (!route.params.topicId) {
        return;
    }
    loading.value = true;
    G_transmit('topicMoocList', {
        data: {
            taskId: route.params.topicId,
            pageIndex: pageInfo.currentPage,
            pageSize: pageInfo.pageSize,
        }
    }).then((res) => {
        list.value = res.data?.rows || [];
        pageInfo.total = res.data.total;
    }).catch((_err) => {
        throw new Error(_err);
    }).finally(() => {
        loading.value = false;
    })
}

onBeforeMount(() => {
    getList();
})
</script>

<style lang="scss" scoped>
.mooc-list-wrap {
    .mooc-list {
        display: flex;
        flex-wrap: wrap;
        padding: 24px 20px 24px;

        .mooc-cell {
            // width: 100%;
            // display: flex;
            width: 278px;
            height: 257px;
            background: #FFFFFF;
            border: 1px solid #EFF0F2;
            font-size: 14px;
            color: var(--srt-main-text-color);
            box-sizing: border-box;
            border-radius: 4px;
            margin: 0 16px 16px 0;
            cursor: pointer;

            &:hover {
                box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.1500);

                .vc-title {
                    color: var(--srt-color-primary);
                }
            }
        }

        .mooc-cell:nth-child(4n) {
            margin-right: 0;
        }

        .link-container {
            width: 100%;
            height: 100%;
        }

        .cover-wrap {
            width: 278px;
            height: 157px;
            overflow: hidden;
            position: relative;
            margin-top: -1px;
            margin-left: -1px;

            .vc-cover {
                width: 100%;
                height: 100%;
                position: relative;
                border-radius: 4px 4px 0 0;
                overflow: hidden;

                .img {
                    width: 100%;
                    height: 100%;
                }

                .hover-img {
                    width: 100%;
                    height: 100%;

                    &:hover {
                        transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -webkit-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        transition-duration: 0.5s;
                        -ms-transition-duration: 0.5s;
                        -moz-transition-duration: 0.5s;
                        -webkit-transition-duration: 0.5s;
                        -o-transition-duration: 0.5s;
                    }
                }
            }

            .vc-status {
                // width: 68px;
                height: 24px;
                // text-align: center;
                padding: 0 6px;
                position: absolute;
                top: 0;
                left: 0;
                color: var(--srt-color-white);
                line-height: 24px;
                background: rgba(34, 34, 34, 0.7);
                border-radius: 4px 0px 4px 0px;
            }
        }

        .main-wrap {
            // margin-top: 9px;
            padding: 10px 14px 0;

            .course-flag {
                padding: 0 6px;
                line-height: 20px;
                border-radius: 4px;
                font-size: 13px;
                margin-right: 6px;
                background: #E8F0EF;
                color: #2D6C58;
                &.required-course {
                    color: #654A30;
                    background: #EEEBE9;
                }
            }

            .vc-title {
                flex: 1;
                font-size: 14px;
                font-weight: bold;
                color: #222222;
                line-height: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .user-info {
                height: 19px;
                font-size: 14px;
                color: #666666;
                line-height: 22px;
                margin-top: 4px;

                .seperator {
                    display: inline-block;
                    width: 5px;
                    transform: scale(0.2, 1);
                    height: 12px;
                    background: #E0E2E4;
                    margin-left: 10px;
                    margin-right: 10px;
                }
            }

            .course-info {
                font-size: 14px;
                color: #999999;
                line-height: 22px;
                margin-top: 8px;
            }
        }

        .flex {
            display: flex;
        }

        .flex-1 {
            width: 0;
            flex: 1;
        }
    }

    .no-data-wrap {
        margin: 100px auto 0;
        text-align: center;
    }

    .add-mooc-btn {
        margin-top: 13px;
    }

    .page-wrap-right {
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        margin-bottom: 40px;
    }
}</style>
